<template>
  <div class="layout">
    <Row class="layout-header">
      <Col span="24">
        <!--<img :src="logos" width="131" height="44" class="logo">-->
        <span class="proj-shu">运营后台</span>
        <Button class="top-logout" type="primary" size="large" @click="onLogout" icon="log-out">退出后台</Button>
        <span class="top-welcome">欢迎:{{userName}}</span>
      </Col>
    </Row>
    <Row>
      <Col :span="spanLeft" class="layout-menu-left">
        <Menu @on-select="routeTo" width="auto" theme="dark">
          <template v-for="menu in menus">
            <template v-if="menu.children.length <= 0">
              <Menu-item :name="menu.routerPath" :key="menu.id">
                {{menu.name}}
              </Menu-item>
            </template>
            <template v-else>
              <Submenu :name="menu.routerPath" :key="menu.id">
                <template slot="title">
                  {{menu.name}}
                </template>
                <template v-for="submenu in menu.children">
                  <Menu-item :name="submenu.routerPath" :key="submenu.id">
                    {{submenu.name}}
                  </Menu-item>
                </template>
              </Submenu>
            </template>
          </template>
        </Menu>
      </Col>
      <Col :span="spanRight">
        <!--<div class="layout-header">
          <i-button type="text" @click.native="toggleClick">
            <Icon type="navicon" size="32"></Icon>
          </i-button>
        </div>-->
        <!--<div class="layout-breadcrumb">
          <Breadcrumb  separator="<b class='demo-breadcrumb-separator'>=></b>">
            <Breadcrumb-item>首页</Breadcrumb-item>
            <Breadcrumb-item>页面</Breadcrumb-item>
            <Breadcrumb-item class="layout-breadcrumb-item">{{this.$route.path.replace('/','')}}</Breadcrumb-item>
          </Breadcrumb>
        </div>-->
        <div class="layout-content">
          <div class="layout-content-main">
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
        </div>
        <!--<div class="layout-copy">
            Copyright &copy; 2017-2018,边锋蜀山, All Rights Reserved
        </div>-->
      </Col>
    </Row>
  </div>
</template>
<script>
import {getMyMenu, getMenuVOList} from '@/api/menu.js'
import {setFetchedData, KEYS, getFetchedData} from '@/common/constFetchData.js'
// import { getUserName } from '@/common/auth'
import {getManager} from '@/api/user.js'
// import logos from '@/assets/bianfeng/logo-s.png'
import logos from '@/assets/bianfeng/logo-s_1.png'
import {getVO} from '@/common/proto-vo.js'
import {setUserBindUserId, setUserBindUserName, setUserBindUId, setUId, setUserGid} from '@/common/auth'
export default {
  data () {
    return {
      spanLeft: 5,
      spanRight: 19,
      menus: [],
      userName: '',
      helpModal: false,
      logos
    }
  },
  created () {
    let vos = getFetchedData(KEYS.MY_MENUS)
    if (vos) {
      this.menus = vos
    } else {
      getMyMenu().then((data) => {
        if (!data) {
          return
        }
        let menuAll = getMenuVOList(data)
        // console.log('dash - created', menuAll)
        setFetchedData(KEYS.MY_MENUS, menuAll)
        this.menus = menuAll
        // console.log(this.menus)
      })
    }

    getManager().then((data) => {
      console.log('managerVO:', data)
      if (!data) {
        return
      }
      let ManagerVO = getVO('ManagerVO')
      let pv = data.data.data
      let vo = ManagerVO.decode(pv.data[0])
      this.userName = vo.userName
        // this.userName = vo.userName + ',   数字ID:未绑定'
      setUserBindUserId(vo.bindUserId)
      setUserBindUserName(vo.bindUserName)
      setUserBindUId(vo.bindUId.toNumber())
      setUId(vo.uid.toNumber())
      setUserGid(vo.gid.toNumber())
    })
    // this.userName = getUserName()
  },
  methods: {
    routeTo (e) {
      console.log('dashboard:', e)
      this.$router.push(e)
    },
    onLogout () {
      window.location.href = '/slotmanager'
    },
    onHelp () {
      this.helpModal = true
    }
  }
}
</script>

<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .logo{
    float: left;
    margin-top: 15px;
    margin-left: 20px;
  }
  .proj-shu{
     font-size: 30px;
     vertical-align:middle;
     margin-left: 20px;
     line-height:75px;
  }
  .proj-name{
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 20px;
  }
  .top-logout{
    float:right;
    margin-top: 25px;
    margin-right: 9px;
  }
  .top-welcome{
    float:right;
    margin-top: 25px;
    font-size: 20px;
    margin-right: 30px;
  }
  .layout-menu-left {
    background: #464c5b;
    min-height: 600px;
  }
  .layout-header{
    height: 80px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }
  .layout-breadcrumb {
    padding: 10px 15px 0;
  }
  .demo-breadcrumb-separator{
      color: #ff0000;
    }
  .layout-content {
    min-height: 510px;
    margin: 10px;
    overflow: auto;
    background: #fff;
    border-radius: 2px;
  }
  .layout-content-main {
    padding: 10px 10px;
  }
  .layout-copy {
    text-align: center;
    padding: 10px 0 10px;
    color: #9ea7b4;
  }
</style>
